var circleObj = function(){
	this.canvas = document.getElementById("canvas_circle");
	this.ctx = this.canvas.getContext("2d");
	this.angle = 0.5;
	this.angle_time = 0;
	
}




circleObj.prototype.init= function(){
	
}

circleObj.prototype.draw = function(){
	// this.angle_time +=deltaTime;
	// if(this.angle_time>800){
	// this.angle_time = 0;
	// }
	// this.angle = Math.floor(vue.readCard/500);
	this.ctx.clearRect(0,0,this.width,this.height);
	if(vue.isscanData){
		this.ctx.translate(this.w_center,this.w_center);
		this.ctx.rotate(this.angle*Math.PI/180);
		this.ctx.translate(-this.w_center,-this.w_center);
	}
	
	
	this.drawTwoCircle(this.ctx);
	this.drawTwosCircle(this.ctx);
	this.drawBlueThread(this.ctx);
	this.drawOrangeFour(this.ctx);
	this.drawOrangeFourOut(this.ctx);
	this.drawOrangeFiveOut(this.ctx);
	this.drawBlueSixOut(this.ctx);
	this.drawBlueCirleSeven(this.ctx);
	this.drawOrangeEgith(this.ctx);
}
 
//里面的黄色半圆
circleObj.prototype.drawTwoCircle = function(ctx){
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle="#FFA500";
	ctx.lineWidth=8;
	 ctx.arc(this.w_center,this.w_center,this.w_center/3,1.5*Math.PI,0.5*Math.PI);
	 ctx.stroke();
	 ctx.restore();
}
//里面的蓝色半圆
circleObj.prototype.drawTwosCircle = function(ctx){
	ctx.save();
	ctx.beginPath();
	 ctx.setLineDash([5,5]);
	ctx.strokeStyle="#1ec0ff99";
	ctx.lineWidth=8;
	ctx.lineJoin="round";
	 ctx.arc(this.w_center,this.w_center,this.w_center/3,0.5*Math.PI,1.5*Math.PI);
	 ctx.stroke();
	 ctx.restore();
}


//黄圈外的小篮圈
circleObj.prototype.drawBlueThread=function(ctx){
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle="#1ec0ff";
	ctx.lineWidth=1;
	 ctx.arc(this.w_center,this.w_center,this.w_center/2.3,0,2*Math.PI);
	 ctx.stroke();
	 ctx.restore();
}
//外部的小
circleObj.prototype.drawOrangeFour=function(ctx){
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle="#FFA500";
	ctx.lineWidth=2;
	 ctx.arc(this.w_center,this.w_center,this.w_center/1.8,1.5*Math.PI,0.5*Math.PI);
	 ctx.stroke();
	 ctx.restore();
}
//外部的小 圆环
circleObj.prototype.drawOrangeFourOut=function(ctx){
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle="#FFA50088";
	ctx.lineWidth=10;
	 ctx.arc(this.w_center,this.w_center,this.w_center/1.8+6,1.5*Math.PI,0.5*Math.PI);
	 ctx.stroke();
	 ctx.restore();
}

//外部的小 圆环
circleObj.prototype.drawOrangeFiveOut=function(ctx){
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle="#FFA500";
	ctx.lineWidth=2;
	 ctx.arc(this.w_center,this.w_center,this.w_center/1.8+10,0.51*Math.PI,1.49*Math.PI);
	 ctx.stroke();
	 ctx.restore();
}




circleObj.prototype.drawBlueSixOut=function(ctx){
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle="#1ec0ff";
	ctx.lineWidth=5;
	 ctx.arc(this.w_center,this.w_center,this.w_center/1.3,0,2*Math.PI);
	 ctx.stroke();
	 ctx.restore();
}

//扇形
circleObj.prototype.drawBlueCirleSeven=function(ctx){
	
	ctx.save();
	ctx.strokeStyle="#1ec0ff";
	ctx.lineWidth=2;
	ctx.beginPath();
	ctx.moveTo(this.w_center,this.w_center);
	ctx.arc(this.w_center,this.w_center,this.w_center/1.05,0.9*Math.PI,1.1*Math.PI);
	ctx.closePath();
	ctx.stroke();
	//在后绘制的图形外显示先绘制的图形。只有后绘制的图形外的目标图像部分会被显示，源图像是透明的。
	ctx.globalCompositeOperation="destination-out";
	ctx.beginPath();
	ctx.moveTo(this.w_center,this.w_center);
	ctx.lineWidth=2;
	ctx.arc(this.w_center,this.w_center,this.w_center/2.3-2,0.9*Math.PI,1.1*Math.PI);
	ctx.closePath();
	ctx.stroke();
	ctx.restore();
}

//黄色扇形
circleObj.prototype.drawOrangeEgith=function(ctx){
	
	ctx.save();
	ctx.strokeStyle="#FFA500";
	ctx.lineWidth=2;
	ctx.beginPath();
	ctx.moveTo(this.w_center,this.w_center);
	ctx.arc(this.w_center,this.w_center,this.w_center/1.15,0.95*Math.PI,1.05*Math.PI);
	ctx.closePath();
	ctx.stroke();
	//在后绘制的图形外显示先绘制的图形。只有后绘制的图形外的目标图像部分会被显示，源图像是透明的。
	ctx.globalCompositeOperation="destination-out";
	ctx.beginPath();
	ctx.moveTo(this.w_center,this.w_center);
	ctx.lineWidth=2;
	ctx.arc(this.w_center,this.w_center,this.w_center/2.3-2,0.95*Math.PI,1.05*Math.PI);
	ctx.closePath();
	ctx.stroke();
	ctx.restore();
}


circleObj.prototype.resize=function(){
	this.canvanRect = this.canvas.getBoundingClientRect();
	let radi = window.devicePixelRatio;
	let s_w = this.canvanRect.width;
	let s_h = this.canvanRect.height;
	// console.log("circle 尺寸改变: ",s_w,s_h);
	this.canvas.style.width = s_w+"px";
	this.canvas.style.height = s_h+"px";
	this.canvas.width = s_w * radi;
	this.canvas.height = s_h * radi;
	this.ctx.scale(radi,radi);
	
	this.width = this.canvanRect.width;
	this.height =this.canvanRect.height; 
	this.w_center = this.width/2;
	this.h_center =  this.height/2;
	this.bigcircle_radius = this.w_center/2;
	
}


circleObj.prototype.size = function(){
	this.resize()
}